<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            text-align:center;
        }
        div{
            width: 500px;
            height: 200px;
            line-height:200px;
            font-size:100px;
            font-weight:bold;
            margin:auto;
            border:1px solid #000;
        }
        button{
            width: 500px;
            margin-top:20px;
            font-size:50px;
        }
        </style>
</head>
<body>
    <h1>随机点名</h1>
    <div id="box"></div>
    <button id="btn">开始</button>
</body>
</html>
<script>
    /*
        1、给按钮绑定点击事件
            1判断按钮的文字是否为开始
                开始：
                    1、创建定时器，
                    2、在定时器中执行修改名字
                        1、获取随机数，
                        2、找到数组元素
                        3、设置内容
                    3、修改按钮文字为结束
                结束：
                    1、清除定时器
                    2、修改文字为开始


    */ 
    // 获取min到max的随机整数
    function getRandom(min,max){
        return Math.floor(Math.random()*(max-min+1)+min);
    }
    // 1、有一个集合保存可以使用名字
    var arr = ['陈达森','黄磊','张雨','贺卓奇','盛南','刘华','吴震宇','廖家成','郑佳豪','余真珍','欧建麟','叶鹏','郭鑫海','赵雨','游书颖','程方旭', '李焘','王斌','王榕', '杨雯',	'彭朝阳',	'严潇帅' ,'段雨辉',	'张海根',	'刘福森',	'孙文庆',	'邱鹏飞','段健','陈成富','何雪彬','陶玉萍' ,'王栓','李大翠','李星','吴志鹏','许义鸿', '林正良','胡江涛','雷美洪','陆瑶','钟宗伟','袁垚','廖慧英','晏露辉','朱寒松','李佳乐','刘石发','胡滢','郭媛媛' ,'李胜清','肖立','王丽君','周茂清','郎昊', '马健','钟凌云','黄火','胡炳华','朱慧平'
    ];
    var timer;
    btn.onclick = function(){
        // 在事件处理程序中this代表着当前触发事件对应标签的dom对象
        // console.log(this);
        // 由于一个按钮实现开始停止 需要区分出 要开始任务还是停止任务
        if(this.innerHTML == '开始'){
            // 开始任务
            timer = setInterval(function(){
                // 2、当点击按钮后 随便找出一个名字
                var index = getRandom(0,arr.length-1);
                // 3、将名字显示在box中
                box.innerHTML = arr[index];
            },30);
            // 修改文字为结束
            this.innerHTML='结束';
        }else{
            // 点击的是终止
            // 更换文字为开始
            this.innerHTML = '开始';
            // 停止定时器的任务
            clearInterval(timer);
        }  
    }
    
</script>

<script>
// ['陈达森','黄磊','张雨','贺卓奇','盛南','刘华','吴震宇','廖家成','郑佳豪','余真珍','欧建麟','叶鹏','郭鑫海','赵雨','游书颖','程方旭', '李焘','王斌','王榕', '杨雯',	'彭朝阳',	'严潇帅' ,'段雨辉',	'张海根',	'刘福森',	'孙文庆',	'邱鹏飞','段健','陈成富','何雪彬','陶玉萍' ,'王栓','李大翠','李星','吴志鹏','许义鸿', '林正良','胡江涛','雷美洪','陆瑶','钟宗伟','袁垚','廖慧英','晏露辉','朱寒松','李佳乐','刘石发','胡滢','郭媛媛' ,'李胜清','肖立','王丽君','周茂清','郎昊', '马健','钟凌云','黄火','胡炳华','朱慧平'
// ]





</script>